<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./动态滑动登录框.css">
</head>
<body>
  <!-- 隐藏icon -->
  <div class="show-btn" onclick="show()">
    <i class="iconfont icon-denglu"></i>Show Login Form
  </div>

  <div class="login-box">
    <div class="hide-btn" onclick="hide()">
      <i class="iconfont icon-chahao"></i>
    </div>
    <form class="login-form" action="#" method="POST">
      <h1>Welcome</h1>
      <input class="txtb" type="text" name="" placeholder="UserName">
      <input class="txtb" type="password" name="" placeholder="PassWord">
      <input class="login-btn" type="submit" value="Login">
    </form>
  </div>
  <!-- 编写js脚本 -->
  <script>
    function show(){
      document.getElementsByClassName("login-box")[0].classList.add("showed");
      document.getElementsByClassName("show-btn")[0].style.display="none";
    }
    function hide(){
      document.getElementsByClassName("login-box")[0].classList.remove("showed")
      document.getElementsByClassName("show-btn")[0].style.display="block";
    }
  </script>
</body>
</html>